Saetl.net

Simple And Easy TempLate

Simple fading slideshowの使い方

  1. 下記ページの「Download」よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル（サンプルではindex.html）にコードを記述。
    ＜パスは上記ファイル構成の場合なので環境にあわせて変更＞
    ・head部分にcssファイルを読み込ませるためのコードを記述。 
    <head>
<!--ダウンロードしたファイル-->
<link rel="stylesheet" type="text/css" href="css/Simple fading slideshow.css" />
</head>

    サンプルのcssコード（サンプルのcssは改変しています）

    @import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Petit+Formal+Script&subset=latin,latin-ext);
/*ページ設定部分（style.cssなどで設定していれば削除する）*/
body, ul, li, h1, h2, span {
	margin: 0;
	padding: 0;
}
body {
	background: #ddd;
	color: #fff;
	font-size: 16px;
	font-family: 'PT Sans Narrow';
}
#container {
	width: 800px;
	margin: 50px auto;
}
/*ここまでページ設定部分*/


/*ここからSimple fading slideshowの設定*/
p.desc strong {
	font-size: 18px;
	padding-bottom: 5px;
	color: #fff;
	font-family: 'Petit Formal Script';
	font-weight: normal;
	display: block;
}
img {
	-webkit-transition: all 0.5s ease-in-out;
	position: relative;
	z-index: 4;
	height: 400px;
	width: auto;
}
#show {
	width: 520px;
	position: relative;
	height: 420px;
	margin: 50px auto;
}
#show .slide {
	border: 10px solid #fff;
	position: absolute;
	top: 0;
	left: 0;
	width: 500px;
	height: 400px;
	overflow: hidden;
	text-align: center;
}
#show .slide p {
	font-size: 13px;
	text-align: left;
	position: relative;
	z-index: 5;
	padding: 5px;
	margin-top: -83px;
	color: #fefefe;
	height: 70px;
	background: rgba(0,0,0,0.8);
}
/* single image - copy from here */

.img1 {
	animation: img1 40s infinite;
	-o-animation: img1 40s infinite;
	-moz-animation: img1 40s infinite;
	-webkit-animation: img1 40s infinite;
}
 @-webkit-keyframes img1 {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @keyframes img1 {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-moz-keyframes img1 {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/*
to that moment
then change the number on img{}
also you have to make it right with % (remember!)
*/

.img2 {
	animation: img2 40s infinite;
	-o-animation: img2 40s infinite;
	-moz-animation: img2 40s infinite;
	-webkit-animation: img2 40s infinite;
}
.img3 {
	animation: img3 40s infinite;
	-o-animation: img3 40s infinite;
	-moz-animation: img3 40s infinite;
	-webkit-animation: img3 40s infinite;
}
.img4 {
	animation: img4 40s infinite;
	-o-animation: img4 40s infinite;
	-moz-animation: img4 40s infinite;
	-webkit-animation: img4 40s infinite;
}
.img5 {
	animation: img5 40s infinite;
	-o-animation: img5 40s infinite;
	-moz-animation: img5 40s infinite;
	-webkit-animation: img5 40s infinite;
}

/* keyframing */

@-webkit-keyframes img2 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 1;
}
40% {
opacity: 1;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @keyframes img2 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 1;
}
40% {
opacity: 1;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-moz-keyframes img2 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 1;
}
40% {
opacity: 1;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-webkit-keyframes img3 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
60% {
opacity: 1;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @keyframes img3 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
60% {
opacity: 1;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-moz-keyframes img3 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
60% {
opacity: 1;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-webkit-keyframes img4 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @keyframes img4 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-moz-keyframes img4 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-webkit-keyframes img5 {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}
 @keyframes img5 {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}
 @-moz-keyframes img5 {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}
    ・<body></body>内にコードを記述 
    <div id="show">
    <div class="img1 slide" > <img src="http://d.asset.soup.io/asset/3834/7869_bfa2_550.jpeg" alt="England" /> </div>
    <div class="img2 slide" > <img src="http://8.asset.soup.io/asset/2542/0024_29da.jpeg" alt="image2" />
      <p class="desc">Cum sociis natoque penatibus et felis. Fusce aliquet ac, blandit quis, interdum arcu faucibus lorem, ut malesuada id, condimentum ac, laoreet</p>
    </div>
    <div class="img3 slide"> <img src="http://missmosquito.files.wordpress.com/2010/12/winter_tale_by_valcom2the.jpg" alt="image3" />
      <p class="desc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Gravida sodales. Aenean ut erat. Pellentesque eu turpis vulputate tortor et ultrices consectetuer. Etiam dapibus augue turpis, molestie elit, sit amet eleifend mauris sit amet, tellus. Praesent scelerisque feugiat.</p>
    </div>
    <div class="img4 slide" > <img src="http://s.cdaction.pl/obrazki/1730t_Battlefield_BC2_beta.jpg" alt="image4" />
      <p class="desc"><strong>Battlefield: Bad Company 2</strong>przenosi rozgrywkę znaną z serii Battlefield na front next-genowych konsol i PC-tów! Walka odbywa się na 8 wielkich, otwartych mapach, a na każdej z nich trzeba stosować zupełnie inną taktykę!</p>
    </div>
    <div class="img5 slide" > <img src="http://2.asset.soup.io/asset/2200/7682_1abb_550.jpeg" alt="image5" />
      <p class="desc"><strong>My cup! And my beloved keyboard</strong>All of them are dead now...</p>
    </div>
  </div>

    サンプルのhtmlコード

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Simple fading slideshow</title>
<link href='http://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Amaranth:700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/Simple fading slideshow.css" />
</head>

<body>
<div id="container">
  <div id="show">
    <div class="img1 slide" > <img src="http://d.asset.soup.io/asset/3834/7869_bfa2_550.jpeg" alt="England" /> </div>
    <div class="img2 slide" > <img src="http://8.asset.soup.io/asset/2542/0024_29da.jpeg" alt="image2" />
      <p class="desc">Cum sociis natoque penatibus et felis. Fusce aliquet ac, blandit quis, interdum arcu faucibus lorem, ut malesuada id, condimentum ac, laoreet</p>
    </div>
    <div class="img3 slide"> <img src="http://missmosquito.files.wordpress.com/2010/12/winter_tale_by_valcom2the.jpg" alt="image3" />
      <p class="desc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Gravida sodales. Aenean ut erat. Pellentesque eu turpis vulputate tortor et ultrices consectetuer. Etiam dapibus augue turpis, molestie elit, sit amet eleifend mauris sit amet, tellus. Praesent scelerisque feugiat.</p>
    </div>
    <div class="img4 slide" > <img src="http://s.cdaction.pl/obrazki/1730t_Battlefield_BC2_beta.jpg" alt="image4" />
      <p class="desc"><strong>Battlefield: Bad Company 2</strong>przenosi rozgrywkę znaną z serii Battlefield na front next-genowych konsol i PC-tów! Walka odbywa się na 8 wielkich, otwartych mapach, a na każdej z nich trzeba stosować zupełnie inną taktykę!</p>
    </div>
    <div class="img5 slide" > <img src="http://2.asset.soup.io/asset/2200/7682_1abb_550.jpeg" alt="image5" />
      <p class="desc"><strong>My cup! And my beloved keyboard</strong>All of them are dead now...</p>
    </div>
  </div>
</div>
<a href="https://saetl.net/csssample.html"> <span style="position:fixed; right:10px; top:10px; font-size:1em; color:#000;">CSSサンプル集 - Saetl.net</span> </a>
</body>
</html>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル